<template>
  <view class="pd pt20 dsfdttxe">
    <view class="bgff ffgtyser ov">
      <view class="pr pd pt30 row jjhhxder">
        <view class="col">
          <image
            src="../../../static/img/louzuo.png"
            class="koujxert cz"
            mode="widthFix"
          ></image>
          <text class="ls fz28 ml10">{{ detail.fieldTypeName }}</text>
        </view>
        <view class="col-2 tr z9 fz26 pt10">
          编号：{{ detail.applyFormSn }}
        </view>
      </view>

      <view class="pd pt40 fz24 jjhhxder pr">
        <view class="z3">
          <text class="z9">申请人</text>
          <text class="ml10">{{ detail.chargeName }}</text>
        </view>
        <view class="z3 mt20">
          <text class="z9">申请人所属单位</text>
          <text class="ml10">{{ detail.unityName }}</text>
        </view>
        <view class="z3 mt20">
          <text class="z9">开始时间</text>
          <text class="ml10">{{ detail.startTime }}</text>
        </view>
        <view class="z3 mt20">
          <text class="z9">结束时间</text>
          <text class="ml10">{{ detail.endTime }}</text>
        </view>
        <view class="z3 mt20">
          <text class="z9">时长</text>
          <text class="ml10">{{ longTime }} </text>
        </view>
        <view class="z3 mt20">
          <text class="z9">分配场地：</text>
          <text class="ml10">{{ detail.fieldName }}</text>
        </view>
        <view class="z3 mt20">
          <text class="z9">申请设备</text>
          <text class="ml10">
            <text
              class="equipment-item"
              v-for="(item, index) in detail.equipmentAmount"
              :key="'equipment_' + index"
            >
              {{ item.name }}: {{ item.amount }} &nbsp;&nbsp;
            </text>
          </text>
        </view>
        <view class="z3 mt20">
          <text class="z9">申请理由</text>
          <text class="ml10">{{ detail.purpose }}</text>
        </view>
        <view class="z3 mt20">
          <text class="z9">提交日期</text>
          <text class="ml10">{{ detail.createTime }}</text>
        </view>
        <view class="z3 mt20 row sdfdsfrt">
          <text class="z9">活动推文</text>
          <text class="ml10 col">
            <image
              class="tw"
              :src="'https://www.waibizi.com/' + detail.planAddress"
              mode=""
            />
          </text>
        </view>
      </view>

     <view class="pd pt30">
        <view class="fz26 z6">
          审批流程记录
        </view>

        <view class="kjeert pr mt40">
          <view class="dfddyxeer"> </view>
          <view
            v-for="(item, index) in detail.flowList"
            :key="'flow_' + index"
            class="kjkjhhxner"
          >
            <view class="row">
              <view v-if="item.operatorPhoto" class="xdeeert pr">
                <image :src="item.operatorPhoto" class="kjjmxeert"></image>
                <icon
                  v-if="item.result == 1 || index == 0"
                  type="success_no_circle"
                  size="16"
                  class="cderrrtxe"
                ></icon>
                <icon
                  v-if="item.result == 2"
                  type="clear"
                  size="16"
                  class="cderrrtxe"
                ></icon>
              </view>
              <view v-else-if="!item.operatorPhoto && detail.flowList[index-1] && detail.flowList[index-1].operatorPhoto && index != detail.flowList.length -1 && detail.flowList[index-1].result != 2" class="xdeeert pr">
                <view class="yj kjjxeeert">
                 <image
                    src="../../../static/img/xunuhu.png"
                    class="kjjmxeert"
                  ></image>
                </view>
              </view>
              <view v-else-if="(!item.operatorPhoto && detail.flowList[index-1] && !detail.flowList[index-1].operatorPhoto) || index == detail.flowList.length -1 || detail.flowList[index-1].result == 2" class="xdeeert pr">
                <view class="yj kjjxeeert cccc">
                  <view class="kjjnxeer yj"></view>
                </view>
              </view>
              <view class="col pl60">
                <view class="row mt10">
                  <view class="fz30 z3">
                    {{item.name}}
                  </view>
                  <view class="fz26 z9 tr col">
                    {{ item.createTime }}
                  </view>
                </view>
                <view v-if="item.result == 1 || item.result == 2" class="fz26 z3 mt40">
                  {{ item.unityName }}
                </view> 
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <navigator
      v-if="pageQuery.status == 'null'"
      class="kjnmxeeretr fz32"
      :url="
        '/pages/gongzuo/shenhe/shenbinr?applyFormId=' +
        pageQuery.applyFormId +
        '&status=' +
        pageQuery.status +
        '&startTime=' +
        detail.startTime +
        '&endTime=' +
        detail.endTime+
        '&fp=' +
        pageQuery.fp
      "
    >
      审批
    </navigator>
  </view>
</template>
<script>
export default {
  data() {
    return {
      formData: {
        status: "",
        applyFormId: "",
        note: "",
      },
      detail: {
      },
      loadingImg: require('../../../static/img/xunuhu.png')
    };
  },
  components: {},
  computed: {
    longTime() {
      if(!this.detail.startTime) return ''
      let startTime = this.detail.startTime.split(" ")[1];
      let endTime = this.detail.endTime.split(" ")[1];
      let h = endTime.split(":")[0] - startTime.split(":")[0];
      let min = endTime.split(":")[1] - startTime.split(":")[1];

      if (min < 0) {
        h -= 1;
        min = -min;
      }
      return h + "小时" + min + "分钟";
    },
  },
  mounted() {
    this.formData.applyFormId = this.pageQuery.applyFormId;
    this.init();
  },
  methods: {
    async init(status) {
      this.formData.status = status;
      let res;

      // 已审核
      res = await this.$api.applyForm(this.formData.applyFormId);
      if (res.code == 200) {
        res.data.equipmentAmount = res.data.equipmentAmount ? JSON.parse(res.data.equipmentAmount) : '';

        res.data.flowList = res.data.flowList.map((i,index)=> {
          let historyItem = res.data.historyList[index];
          if(historyItem) {
            i.result = historyItem.result;
            i.name = historyItem.operatorName;
            i.createTime = historyItem.createTime;
            i.unityName = historyItem.unityName;
            i.operatorPhoto = 'https://www.waibizi.com/'+historyItem.operatorPhoto
          }
          return i;
        })
        if(!res.data.historyList.length) {
          res.data.flowList.unshift({
            name: res.data.chargeName, 
            createTime:res.data.createTime,
            operatorPhoto:'https://www.waibizi.com/'+ this.$store.getters.getUserInfo.photo
          })
        }
        res.data.flowList.push({name:'分配完成'})
        this.detail = res.data;
      }
    },
  },
};
</script>
<style scoped>
.tw,
/deep/ .tw img {
  width: 300upx;
  height: 200upx;
  opacity: 1 !important;
}
.equipment-item {
  margin-right: 30upx;
}
.ffgtyser {
  position: relative;
  border-radius: 8upx;
}
.koujxert {
  width: 60upx;
}
.jjhhxder {
  padding-bottom: 30upx;
  border-bottom: 1px dashed #e0e0e0;
}
.jjhhxder::after,
.jjhhxder::before {
  content: " ";
  width: 40upx;
  height: 40upx;
  position: absolute;
  left: -20upx;
  bottom: -20upx;
  border-radius: 50%;
  background: #f7f7f7;
}
.jjhhxder::before {
  left: inherit;
  right: -20upx;
}

.kjjmxeert {
  width: 140upx;
  height: 140upx;
  padding: 10upx;
  background: #fff;
  border: 1px solid #e0e0e0;
}
.xdeeert {
  width: 140upx;
}
.cderrrtxe {
  position: absolute;
  right: -40upx;
  bottom: 20upx;
}
.kjkjhhxner {
  margin-bottom: 40upx;
}
.kjjxeeert {
  text-align: center;
}
.kjjxeeert image {
  width: 80upx;
  height: 80upx;
  border-radius: 50%;
  background: #fff;
  display: inline-block;
}
.kjjnxeer {
  background: #989898;
  border-radius: 50%;
  width: 40upx;
  height: 40upx;
  display: inline-block;
  margin-top: 16upx;
  border: 4upx solid #fff;
}
.dfddyxeer {
  position: absolute;
  left: 65upx;
  top: 0;
  width: 10upx;
  height: 98%;
  background: #bbbbbb;
}
.dsfdttxe {
  padding-bottom: 120upx;
}
</style>
